<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript " src="/js/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
    <link href="/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="/css/question.css" type="text/css" rel="stylesheet"/>
    <link href="/css/css-1.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<nav class="navbar navbar-default color" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand">BBS</a>
        </div>

        <div class="col-lg-6">
            <ul class="nav navbar-nav">
                <li><a href="user/main">首页</a></li>
                <li class="active"><a href="question.html">问答</a></li>
                <li><a href="help.html">帮助中心</a></li>
                <li><a href="mine.html">我的</a></li>
                <li>
                    <form class="form-inline" style="margin-top:8px ">
                        <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0">搜索</button>
                    </form>
                </li>
            </ul>

        </div>

        <div class="col-lg-2 col-lg-offset-2" style="width: 20%;overflow: hidden">
            <ul class="nav navbar-nav">
                <li th:if="*{session.user.name != null}"><a th:text="'欢迎你,'+ *{session.user.name}"
                                                            style="color: red"></a></li>
                <li><a href="javascript:void(0)" class="logoutBtn">注销</a></li>
            </ul>
        </div>
    </div>

</nav>
<div class="container  color"
     style="height: auto;background-color: #ffffff;border-radius: 15px;margin-top: 50px;margin-bottom: 50px">
    <div class="bbs">
        <header><span>我要提问</span></header>
        <section class="bbsit">
            <ul></ul>
        </section>
        <div class="post">
            <img src="" alt="">
            <input class="title" placeholder="请输入标题（1-50个字符）">
            所属版块：<select>
            <option>请选择版块</option>
            <option>Java Web</option>
            <option>C++游戏开发</option>
            <option>机器学习</option>
            <option>网站使用</option>
        </select>
            <textarea class="content"></textarea>
            <input class="btn" value="发布">
            <input class="btn1" value="关闭">
        </div>
    </div>
</div>


<div class="modal-footer" style="margin-top: 10px">
    <div align="center"><a>Powered by 斌斌家豪涛顺 &nbsp;&nbsp;联系我们</a></div>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
    //图片数组
    imgArr = ["image/touxiang01.jpg", "image/touxiang02.jpg", "image/touxiang03.jpg", "image/touxiang04.jpg"];
    //产生随机数
    let number = parseInt(Math.random() * 4);
    // 获取当前时间24小时制
    let day = new Date().toLocaleString('chinese', {hour12: false});
    // let bbsContent = `版块：${opVal}  内容：${textAVal} 发布时间：${day} `;


    //显示发帖
    $(".bbs header span").click(function () {
        // 在 slideDown() 与 slideUp() 方法之间进行切换
        $(".post").slideToggle("slow");
    });

    //按钮
    $(".btn1").click(function () {
        // 关闭向上滑动
        $(".post").slideUp("slow");
    });
    $(".btn").click(function () {
        // 发布向上滑动(发布完成也应该关闭发帖版块)
        $(".post").slideUp("slow");
    });

    var old_data = [
        ["如何修改账号和头像 ", "网站使用", "本系统暂未开发用户自定义修改账号信息，当前可以找管理员进行修改.如果你还有问题，欢迎与我们交流…", "5/20/2022, 21:26:42"],
        ["帖子详情页面右侧的 用户下面的收藏 点赞是什么意思 ", "网站使用", "点赞：帖子用户的所有帖子的总的点赞数<br/>收藏：帖子用户的所有帖子的总的收藏数。如果你还有问题，欢迎与我们交流…", "5/27/2022, 21:26:42"],
        ["首页帖子右侧的浏览量是什么意思", "网站使用", "浏览量指页面的浏览次数，用以衡量用户访问的帖子数量。多次打开同一页面则浏览量累计。如果你还有问题，欢迎与我们交流…", "5/26/2022, 21:26:42"],
        ["为什么有些验证码看起来很容易但是没人做自动识别的？", "机器学习", "验证码之所以存在，就是为了防止机器的自动识别，当某种验证码的自动识别软件烂大街的时候，这种验证码技术也该被产品开发团队打入冷宫了，该软件存在的价值，也就只剩下编程考古了。<br>其实，验证码自动识别的工具并不是没有，网上有不少采用大厂的 OCR API 实现验证码自动识别的博文，用于爬取数据之类的场景，但图像识别技术的进步，也倒逼着打码技术的进步。<br>所谓简单型的验证码，前景和背景容易分离、多位字符串容易切割的，传统的 SVM （支持向量机）就可以轻松搞定。复杂的验证码，使用这几年风光的 CNN（卷积神经网络）也能将其斩于马下，然而再强大的 CNN 也依赖于大量的标注数据。如果要做到 90% 以上的识别率（90% 对于很多使用者来说还是很渣的），可能需要数以万计的样本，和比较长的训练时间。训练成功，平台认为之前的打码方式被破解后，又会提升难度或者换一种思路，别有用心的攻击者又要重新标注数据，重新训练……投入的成本，能否产生足够的利益呢？这是他们需要考虑的问题。<br>深度学习能力增强的同时，现在的验证码技术也衍生出了更为丰富的方式，比如B站，已经采用了滑动拼图验证码。<br> <img src='https://nos.netease.com/cloud-website-bucket/2018052509283991891e16-b412-4332-9159-f29050ac5acd.jpg'>", "5/25/2022, 21:26:42"]
    ];


    $(function () {
        for (var i = 0; i < old_data.length; i++) {
            console.log(i);

            let bbsContent2 = ` ${old_data[i][2]} `;
            // let bbsContent = `  ${old_data[i][1]}`;
            // let bbsContent3 = `          \t 发布时间：${old_data[i][3]} `;
            let bbsContent = "<span class='topspan'> "+old_data[i][1]+"</span><span> &nbsp;&nbsp;&nbsp;&nbsp;发布时间: "+old_data[i][3]+"</span>";
            //产生随机数
            let n = i % 4;
            // 增加节点div li
            $(".bbsit>ul").prepend("<li></li>");
            // 添加图片设置图片路径
            let bImg = $("<img/>").attr("src", imgArr[n]);
            // jq添加div并在div里面添加img
            let bDiv = $("<div></div>").append(bImg);
            // jq添加h1并将输入的内容赋给h1
            let bSpan = $("<div class='outbox'></div>").append(bbsContent);
            // let bSpan3 = $("<h6></h6>").append("<span></span>").html(bbsContent3);
            let bH1 = $("<h3></h3>").html(old_data[i][0]);
            let bSpan2 = $("<h1></h1>").append("<span></span>").html(bbsContent2);
            // jq添加p并再添加span再将输入的内容赋给span
            // 将所有添加的元素添加到li中
            $(".bbsit>ul>li:first").append(bDiv, bSpan, bH1, bSpan2);
            //

        }


        $(".btn").click(function () {
            // 获取当前时间
            let day = new Date().toLocaleString('chinese', {hour12: false});
            // 获取输入框的值
            const titleVal = $(".title").val();
            // 获取版块的值
            const opVal = $("select").val();
            // 获取文本域的值
            const textAVal = $(".content").val();
            let bbsContent2 = `  ${textAVal}  `;
            // let bbsContent = `  ${opVal}`;
            // let bbsContent3 = `        \t 发布时间：${day} `;
            let bbsContent = "<span class='topspan'> "+opVal+"</span><span>&nbsp;&nbsp;&nbsp;&nbsp;发布时间: "+day+"</span>";
            // 增加节点div li
            $(".bbsit>ul").prepend("<li></li>");
            let bImg = $("<img/>").attr("src", imgArr[number]);
            // jq添加div并在div里面添加img
            let bDiv = $("<div></div>").append(bImg);
            // jq添加h1并将输入的内容赋给h1
            let bSpan = $("<div class='outbox'></div>").append(bbsContent);
            let bH1 = $("<h3></h3>").html(titleVal);
            let bSpan2 = $("<h1></h1>").append("<span></span>").html(bbsContent2);
            // jq添加p并再添加span再将输入的内容赋给span
            // 将所有添加的元素添加到li中
            $(".bbsit>ul>li:first").append(bDiv, bSpan, bH1, bSpan2);
            // 向上滑动
            $(".post").slideUp("slow");
        })
    });


</script>
</html>

<script type="text/javascript">
    $(function () {
        $(".logoutBtn").click(function () {
            $.ajax({
                url: "user/logout",
                type: "get",
                dataType: "json",
                success: function (data) {
                    if (data.success) {
                        window.location.href = "login.html"
                    } else {
                        $.alert("注销失败")
                    }
                }
            })
        })
    })

</script>